import React,{useState} from 'react'
import './khgl.css';
import { Button,Input,Checkbox,Table,Modal,Select,Upload,message,Drawer,Tabs,DatePicker,Radio } from 'antd';
import { UploadOutlined,PlusOutlined,ExclamationCircleTwoTone } from '@ant-design/icons';

import xzjh from '../../../static/images/xzjh.png'
import { useNavigate } from 'react-router-dom';
import items from './khgl.js'


export default function KHGL() {
    let data=[
        {
            key:1,
            name:'北京西天取经科技有限公司',
            a1:'-',
            a2:'-',
            a3:'-',
            a4:'-',
            a5:'-',
            a6:'-',
        },
        {
            key:2,
            name:'张泽良13333333333',
            a1:'是',
            a2:'-',
            a3:'-',
            a4:'-',
            a5:'-',
            a6:100,
        },
        {
            key:3,
            name:'华采科技(北京)有限公司',
            a1:'是',
            a2:'是',
            a3:'是',
            a4:80,
            a5:51,
            a6:30,
        },
        {
            key:4,
            name:'百度网络科技有限公司',
            a1:'-',
            a2:'是',
            a3:'-',
            a4:1000,
            a5:30,
            a6:80,
        }
        
    ];
    let col=[
        {
            title:'客户名称',
            dataIndex:'name',
            key:'name',
            align:'center'
        },
        {
            title:'有未开始的租期',
            dataIndex:'a1',
            key:'a1',
            align:'center'
        },
        {
            title:'租期进行中',
            dataIndex:'a2',
            key:'a2',
            align:'center'
        },
        {
            title:'有已结束的租期',
            dataIndex:'a3',
            key:'a3',
            align:'center'
        },
        {
            title:'曾驻最大面积(㎡）',
            dataIndex:'a4',
            key:'a4',
            align:'center'
        },
        {
            title:'已驻天数(天）',
            dataIndex:'a5',
            key:'a5',
            align:'center'
        },
        {
            title:'待驻天数(天）',
            dataIndex:'a6',
            key:'a6',
            align:'center'
        }
    ];

    const option=[
        {
            value: 'jack',
            label: 'Jack',
        },
        {
            value: 'lucy',
            label: 'Lucy',
        },
        {
            value: 'Yiminghe',
            label: 'yiminghe',
        },
        {
            value: 'disabled',
            label: 'Disabled'
        },
    ]
    const option2=[
        {
            value: 'jack',
            label: 'Jack',
        },
        {
            value: 'lucy',
            label: 'Lucy',
        },
        {
            value: 'Yiminghe',
            label: 'yiminghe',
        },
        {
            value: 'disabled',
            label: 'Disabled'
        },
    ]
    const option3=[
        {
            value:'+86',
            label:'+86'
        }
    ]

    // 新建客户
    const [isModalOpen, setIsModalOpen] = useState(false);
    const showModal = () => {
        setIsModalOpen(true);
    };
    const handleOk = () => {
        setIsModalOpen(false);
    };
    const handleCancel = () => {
        setIsModalOpen(false);
    };

    // 批量导入
    const [isPldr, setIsPldr] = useState(false);
    const showModal2 = () => {
        setIsPldr(true);
    };
    const handleOk2 = () => {
        setIsPldr(false);
    };
    const handleCancel2 = () => {
        setIsPldr(false);
    };

    const handleChange = (value) => {
        console.log(`selected ${value}`);
    };

    // 点击上传
    const props = {
        name: 'file',
        action: 'https://run.mocky.io/v3/435e224c-44fb-4773-9faf-380c5e6a2188',
        headers: {
            authorization: 'authorization-text',
        },
        onChange(info) {
            if (info.file.status !== 'uploading') {
                console.log(info.file, info.fileList);
            }
            if (info.file.status === 'done') {
                message.success(`${info.file.name} file uploaded successfully`);
            } else if (info.file.status === 'error') {
                message.error(`${info.file.name} file upload failed.`);
            }
        },
    };


    // 编辑发票
    const [isFapiao,setIsFapiao]=useState(false);
    const [isShow,setIsshow]=useState(true);
    const showFapiao=()=>{
        setIsFapiao(true);
    };
    const fapiapOk=()=>{
        setIsFapiao(false);
    }
    const fapiapCancel=()=>{
        setIsFapiao(false);
    }
    const fplx=[
        {
            value:'个人',
            label:'个人',
        },
        {
            value:'企业',
            label:'企业'
        }
    ];
    const fapiao=(value)=>{
        console.log(value);
        if(value==='个人'){
            setIsshow(false);
        }
        else if(value==='企业'){
            setIsshow(true);
        }
        console.log(isShow);
    }

    // 编辑-个人信息
    const [isGeren,setIsGeren]=useState(false);
    const showGeren=()=>{
        setIsGeren(true);
    };
    const gerenOk=()=>{
        setIsGeren(false);
    }
    const gerenCancel=()=>{
        setIsGeren(false);
    }
    const getBase64 = (file) =>
    new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => resolve(reader.result);
        reader.onerror = (error) => reject(error);
    });
    const [previewOpen, setPreviewOpen] = useState(false);
    const [previewImage, setPreviewImage] = useState('');
    const [previewTitle, setPreviewTitle] = useState('');
    const [fileList, setFileList] = useState([]);
    const handleCancel3 = () => setPreviewOpen(false);
    const handlePreview = async (file) => {
        if (!file.url && !file.preview) {
            file.preview = await getBase64(file.originFileObj);
            console.log(file);
        }
        setPreviewImage(file.url || file.preview);
        setPreviewOpen(true);
        setPreviewTitle(file.name || file.url.substring(file.url.lastIndexOf('/') + 1));
    };
    const handleChange2 = ({ fileList: newFileList }) => setFileList(newFileList);
    const uploadButton = (
        <button
            style={{
                border: 0,
                background: 'none'
            }}
            type="button"
        >
        <PlusOutlined />
        <div
            style={{
                marginTop: 8,
            }}
        >
            Upload
        </div>
        </button>
    );

    
    // 编辑基础资料
    const [jczl,setJczl]=useState(false);
    const showJczl=()=>{
        setJczl(true);
    }
    const jczlOk=()=>{
        setJczl(false);
    }
    const jczlCancel=()=>{
        setJczl(false);
    }
    const khlx=[
        {
            value:'企业',
            label:'企业'
        },
        {
            value:'个人',
            label:'个人'
        }
    ];
    const hy=[
        {
            value:'互联网',
            label:'互联网'
        },
        {
            value:'金融',
            label:'金融'
        }
    ];
    const rygm=[
        {
            value:'100~200',
            label:'100~200'
        },
        {
            value:'300~500',
            label:'300~500'
        }
    ];

    // 编辑企业工商信息
    const [gsxx,setGsxx]=useState(false);
    const showGsxx=()=>{
        setGsxx(true);
    }
    const gsxxOk=()=>{
        setGsxx(false);
    }
    const gsxxCancel=()=>{
        setGsxx(false);
    }
    const { TextArea } = Input;

    // 退租
    const [tuizu,setTuizu]=useState(false);
    const showTuizu=()=>{
        setTuizu(true);
    }
    const tuizuOk=()=>{
        setTuizu(false);
    }
    const tuizuCancel=()=>{
        setTuizu(false);
    }
    const szly=[
        {
            value:'企业',
            label:'企业'
        },
        {
            value:'个人',
            label:'个人'
        }
    ];
    const szlc=[
        {
            value:'互联网',
            label:'互联网'
        },
        {
            value:'金融',
            label:'金融'
        }
    ];
    const szkj=[
        {
            value:'100~200',
            label:'100~200'
        },
        {
            value:'300~500',
            label:'300~500'
        }
    ];
    const [value, setValue] = useState(1);
    const [isTuizu,setIsTuizu]=useState(true);
    const onChange1 = (e) => {
        console.log(e.target.value);
        setValue(e.target.value);

        if(e.target.value===1){
            setIsTuizu(true);
        }
        else if(e.target.value===2){
            setIsTuizu(false);
        }
    };

    // 新租
    const [xinzu,setXinzu]=useState(false);
    const showXinzu=()=>{
        setXinzu(true);
    }
    const xinzuOk=()=>{
        setXinzu(false);
    }
    const xinzuCancel=()=>{
        setXinzu(false);
    }
    const szly2=[
        {
            value:'企业',
            label:'企业'
        },
        {
            value:'个人',
            label:'个人'
        }
    ];
    const szlc2=[
        {
            value:'互联网',
            label:'互联网'
        },
        {
            value:'金融',
            label:'金融'
        }
    ];
    const szkj2=[
        {
            value:'100~200',
            label:'100~200'
        },
        {
            value:'300~500',
            label:'300~500'
        }
    ];
    const nav=useNavigate();

    // 新租
    const [xuzu,setXuzu]=useState(false);
    const showXuzu=()=>{
        setXuzu(true);
    }
    const xuzuOk=()=>{
        setXuzu(false);
    }
    const xuzuCancel=()=>{
        setXuzu(false);
    }
    const szly3=[
        {
            value:'企业',
            label:'企业'
        },
        {
            value:'个人',
            label:'个人'
        }
    ];
    const szlc3=[
        {
            value:'互联网',
            label:'互联网'
        },
        {
            value:'金融',
            label:'金融'
        }
    ];
    const szkj3=[
        {
            value:'100~200',
            label:'100~200'
        },
        {
            value:'300~500',
            label:'300~500'
        }
    ];




    const [open, setOpen] = useState(false);
    const showDrawer = () => {
        setOpen(true);
    };
    const onClose = () => {
        setOpen(false);
    };

 

    const onChange = (key) => {
        console.log(key);
    };

    //抽屉删除确认
    const [Modal1, setModal1] = useState(false);
    const showMo = () => {
        setModal1(true);
    };
    const handOk = () => {
        setModal1(false);
    };
    const handCancel = () => {
        setModal1(false);
    };



    return (
        <>
           <div className='wp'>
                {/* 顶部按钮 */}
                <div className="top">
                    <Button type='primary' style={{background:'#8479E3',width:'96px',height:'32px',marginRight:'20px'}} onClick={showModal}>新建客户</Button>
                    <Button type='primary' style={{background:'#8479E3',width:'96px',height:'32px'}} onClick={showModal2}>批量导入</Button>
                    

                    <Button type='primary' onClick={showFapiao}>发票</Button>
                    <Button type='primary' onClick={showGeren}>编辑-个人信息</Button>
                    <Button type='primary' onClick={showJczl}>基础资料</Button>
                    <Button type='primary' onClick={showGsxx}>企业工商信息</Button>
                    <Button type='primary' onClick={showTuizu}>退租</Button>
                    <Button type='primary' onClick={showXinzu}>新租</Button>
                    <Button type='primary' onClick={showXuzu}>续租</Button>
                </div>

                <div className="mid">
                    <div className="mid1">
                        <Input placeholder='请输入客户名称'/>

                        <div className="mid1a">
                            <p>租期状态</p>
                            <Checkbox className='aa' style={{fontSize:'12px',color:'#747B8B'}}>有未开始的租期</Checkbox>;
                            <Checkbox className='aa' style={{fontSize:'12px',color:'#747B8B'}}>租期进行中</Checkbox>;
                            <Checkbox className='aa' style={{fontSize:'12px',color:'#747B8B'}}>有已结束的租期</Checkbox>;
                        </div>

                        <div className="mid1b">
                            <div>
                                <p>曾驻最大面积</p>
                                <Input/>
                                <span>㎡</span>
                                <span>~</span>
                                <Input/>
                                <span>㎡</span>
                            </div>
                            <div>
                                <p>已驻天数</p>
                                <Input/>
                                <span>㎡</span>
                                <span>~</span>
                                <Input/>
                                <span>㎡</span>
                            </div>
                            <div>
                                <p>待驻天数</p>
                                <Input/>
                                <span>㎡</span>
                                <span>~</span>
                                <Input/>
                                <span>㎡</span>
                            </div>
                        </div>
                    </div>
                    <div className="shouqi">
                        <span></span>
                        <div>
                            <img src={xzjh} alt="" />
                            <p>收起筛选</p>
                        </div>
                    </div>
                    <div className="mid-bot">
                        <Button type='primary' style={{background:'#8479E3'}}>查询</Button>
                        <Button type='primary' style={{background:'#f1f0f9',color:'#999cb2'}}>重置</Button>
                    </div>
                </div>

                <div className="list">
                    <Table 
                        className='abc' 
                        dataSource={data}
                        columns={col}
                        onRow={()=>{
                            return {
                                onClick:showDrawer
                            }
                        }}
                    />
                </div>

            </div> 

            {/* 新建客户 */}
            <Modal title="新建客户" open={isModalOpen} onOk={handleOk} onCancel={handleCancel} cancelText={'取消'} okText={'保存'} style={{height:'770px'}}>
                <div className="xjkh">
                    
                    <p>客户信息</p>
                    <div className="khxx">
                        <div className="khxx1">
                            <div className="khxx1-l">
                                <p>*<span>客户名称</span></p>
                                <Input placeholder='请输入'/>
                            </div>
                            <div className="khxx1-r">
                                <p>*<span>客户类型</span></p>
                                <Select
                                    defaultValue="lucy"
                                    style={{
                                        width: 206,
                                        height:36,
                                        borderRadius:0
                                    }}
                                    onChange={handleChange}
                                    options={option2}
                                />
                            </div>
                        </div>

                        <div className="khxx2">
                            <div className="khxx2-l">
                                <span>行业</span>
                                <Input placeholder='请输入'/>
                            </div>
                            <div className="khxx2-r">
                                <span>人员规模</span>
                                <Select
                                    defaultValue="lucy"
                                    style={{
                                        width: 206,
                                        height:36,
                                        borderRadius:0
                                    }}
                                    onChange={handleChange}
                                    options={option}
                                />
                            </div>
                        </div>
                        <div></div>
                    </div>

                    <p>签约联系人</p>
                    <div className="qylxr">
                        <div className="qylxr1">
                            <div className="qylxr1-l">
                                <span>联系人姓名</span>
                                <Input placeholder='请输入'/>
                            </div>
                            <div className="qylxr1-r">
                                <span>联系人职务</span>
                                <Input placeholder='请输入'/>
                            </div>
                        </div>
                        <div className="qylxr2">
                            <div className="qylxr2-l">
                                <span>联系人电话</span>
                                <div>
                                    <Select
                                        defaultValue="中国+86"
                                        style={{
                                            width: 73,
                                            height:36
                                        }}
                                        onChange={handleChange}
                                        // options={option3}
                                    />
                                    <Input placeholder='请输入'/>
                                </div>
                            </div>
                            <div className="qylxr2-r">
                                <span>联系人邮箱</span>
                                <Input placeholder='请输入'/>
                            </div>
                        </div>
                        <div></div>
                    </div>

                    <p>租期管理员</p>
                    <div className="zqgly">
                        <div className="zqgly1">
                            <div className="zqgly1-l">
                                <span>管理员姓名</span>
                                <Input placeholder='请输入'/>
                            </div>
                            <div className="zqgly1-r">
                                <span>管理员证件号</span>
                                <Input placeholder='请输入'/>
                            </div>
                        </div>
                        <div className="zqgly2">
                            <div className="zqgly2-l">
                                <span>管理员电话</span>
                                <div>
                                    <Select
                                        defaultValue="中国+86"
                                        style={{
                                            width: 73,
                                            height:36
                                        }}
                                        onChange={handleChange}
                                        // options={option3}
                                    />
                                    <Input placeholder='请输入'/>
                                </div>
                            </div>
                            <div className="zqgly2-r">
                                <span>管理员邮箱</span>
                                <Input placeholder='请输入'/>
                            </div>
                        </div>
                    </div>
                </div>
            </Modal>

            {/* 批量导入 */}
            <Modal title="新建客户" open={isPldr} onOk={handleOk2} onCancel={handleCancel2} cancelText={'取消'} okText={'保存'} style={{width:'480px'}}>
                <div className="pldr">
                    {/* 温馨提示 */}
                    <div className="wxts">
                        <span>温馨提示：</span>
                        <span>根据模板内的“填写须知”填写客户信息后，将模板Exce上传至此处即可批量导入！</span>
                    </div>

                    <Button type='primary' style={{background:'#8479E3'}} >下载模板</Button>

                    <div className="xian"></div>

                    <div className="up-load">
                        <Upload {...props}>
                            <Button icon={<UploadOutlined />} style={{width:'432px',height:'118px'}} >Click to Upload</Button>
                        </Upload>
                    </div>
                </div>                              
            </Modal>

            {/* 抽屉 */}
            <div>
                <Drawer title="" onClose={onClose} open={open} width={720} className='drawer'>
                    <div className='drawer1'>
                        <div>
                            <h2>北京西天取经科技有限公司</h2>
                            <span>客户ID:KH20191223152623</span>
                        </div>
                            <span style={{cursor:'pointer'}} onClick={showMo}>删除</span>
                    </div>
                    <Tabs defaultActiveKey="5" items={items} onChange={onChange} />
                </Drawer>
            </div>
                <Modal title="" open={Modal1} onOk={handOk} onCancel={handCancel} className='mo1' style={{width:'308px',textAlign:'center'}} cancelText={'取消'} okText={'确定'}>
                        <p>确认删除该客户?</p>
                </Modal>

            {/* 发票信息 */}
            <Modal title='编辑发票信息' open={isFapiao} onOk={fapiapOk} onCancel={fapiapCancel} style={{width:'480px'}} cancelText={'取消'} okText={'保存'} >
                <div className="fapiao">
                    <div className="fp-wp">
                        <p>*<span>发票类型</span></p>
                        <Select
                            defaultValue="企业"
                            style={{
                                
                                borderRadius:0
                            }}
                            onChange={fapiao}
                            options={fplx}
                        />
                    </div>
                    
                    <div className="fp-wp1">
                        {/* 企业 */}
                        {isShow && <div className="fp-wp1-a">
                            <div>
                                <span>发票抬头</span>
                                <Input placeholder='请输入'/>
                            </div>
                            <div>
                                <span>纳税人识别号</span>
                                <Input placeholder='请输入'/>
                            </div>
                            <div>
                                <span>单位地址</span>
                                <Input placeholder='请输入'/>
                            </div>
                            <div>
                                <span>电话号码</span>
                                <Input placeholder='请输入'/>
                            </div>
                            <div>
                                <span>开户行</span>
                                <Input placeholder='请输入'/>
                            </div>
                            <div>
                                <span>银行账户</span>
                                <Input placeholder='请输入'/>
                            </div>
                        </div>
                        }

                        {/* 个人 */}
                        {isShow ? null : <div className="fp-wp1-b">
                                <p>发票抬头</p>
                                <Input placeholder='请输入'/>
                            </div>
                        }

                    </div>
                </div>
            </Modal>

            {/* 编辑-个人信息 */}
            <Modal title='编辑签约个人身份信息' open={isGeren} onOk={gerenOk} onCancel={gerenCancel} style={{width:'480px'}} cancelText={'取消'} okText={'保存'} >
                <div className="geren">
                    <div className="geren1">
                        <p>证件号</p>
                        <Input placeholder='请输入'/>
                    </div>

                    <div className="geren2">
                        <p>证件复印件</p>
                        {/* <Upload {...props}>
                            <Button icon={<PlusOutlined />} style={{width:'260px',height:'140px'}} ></Button>
                        </Upload> */}
                        <Upload
                            action="https://run.mocky.io/v3/435e224c-44fb-4773-9faf-380c5e6a2188"
                            listType="picture-card"
                            fileList={fileList}
                            onPreview={handlePreview}
                            onChange={handleChange2}
                        >
                            {fileList.length >= 8 ? null : uploadButton}
                        </Upload>
                        <Modal open={previewOpen} title={previewTitle} footer={null} onCancel={handleCancel3} >
                            <img
                            alt="example"
                            style={{
                                width: '100%',
                            }}
                            src={previewImage}
                            />
                        </Modal>
                    </div>

                    <div className="geren3">
                        <ExclamationCircleTwoTone twoToneColor='#f00' style={{fontSize:'11px'}}/>
                        <p>图片小于500KB，格式为JPG，PNG，GIF</p>
                    </div>
                </div>
            </Modal>

            {/* 编辑基础资料 */}
            <Modal title='编辑基础资料' open={jczl} onOk={jczlOk} onCancel={jczlCancel} style={{width:'480px'}} cancelText={'取消'} okText={'保存'}>
                <div className="jczl">
                    <div>
                        <p>*<span>客户类型</span></p>
                        <Select
                            defaultValue="企业"
                            onChange={handleChange}
                            options={khlx}
                        />
                    </div>
                    <div>
                        <p>*<span>行业</span></p>
                        <Select
                            defaultValue="互联网"
                            onChange={handleChange}
                            options={hy}
                        />
                    </div>
                    <div>
                        <p>*<span>人员规模</span></p>
                        <Select
                            defaultValue="100~200"
                            onChange={handleChange}
                            options={rygm}
                        />
                    </div>
                </div>
            </Modal>

            {/* 编辑企业工商信息 */}
            <Modal title='编辑企业工商信息' open={gsxx} onOk={gsxxOk} onCancel={gsxxCancel} style={{width:'480px'}} cancelText={'取消'} okText={'保存'}>
                <div className="gsxx">
                    <div className="gsxx1">
                        <div>
                            <span>统一社会信用代码</span>
                            <Input placeholder='请输入'/>
                        </div>
                        <div>
                            <span>组织机构代码</span>
                            <Input placeholder='请输入'/>
                        </div>
                        <div>
                            <span>注册号</span>
                            <Input placeholder='请输入'/>
                        </div>
                        <div>
                            <span>经营状态</span>
                            <Input placeholder='请输入'/>
                        </div>
                        <div>
                            <span>所属行业</span>
                            <Input placeholder='请输入'/>
                        </div>
                        <div>
                            <span>成立日期</span>
                            <DatePicker onChange={onChange} style={{width:'206px',height:'36px',borderRadius:0}}/>
                        </div>
                        <div>
                            <span>公司类型</span>
                            <Input placeholder='请输入'/>
                        </div>
                        <div>
                            <span>营业期限</span>
                            <div>
                                <DatePicker onChange={onChange} style={{width:'90px',height:'36px',borderRadius:0}}/>
                                <p>~</p>
                                <DatePicker onChange={onChange} style={{width:'90px',height:'36px',borderRadius:0}}/>
                            </div>
                        </div>
                        <div>
                            <span>法定代表人</span>
                            <Input placeholder='请输入'/>
                        </div>
                        <div>
                            <span>发照日期</span>
                            <DatePicker onChange={onChange} style={{width:'206px',height:'36px',borderRadius:0}}/>
                        </div>
                        <div>
                            <span>注册资本</span>
                            <Input placeholder='请输入'/>
                        </div>
                        <div>
                            <span>登记机关</span>
                            <Input placeholder='请输入'/>
                        </div>
                        <div>
                            <span>所属地区</span>
                            <Input placeholder='请输入'/>
                        </div>
                        <div>
                            <span>企业地址</span>
                            <Input placeholder='请输入'/>
                        </div>
                    </div>

                    <div className="gsxx2">
                        <p>发票抬头</p>
                        <TextArea rows={4} style={{borderRadius:0,marginTop:12}}/>      
                    </div>
                </div>
            </Modal>

            {/* 退租 */}
            <Modal title='退租' open={tuizu} onOk={tuizuOk} onCancel={tuizuCancel} style={{width:'480px'}} cancelText={'取消'} okText={'保存'}>
                <div className="tuizu">
                    <div className="tuizu1">
                        <div>
                            <p>*<span>所在楼宇</span></p>
                            <Select
                                onChange={handleChange}
                                options={szly}
                            />
                        </div>
                        <div>
                            <p>*<span>所在楼层</span></p>
                            <Select
                                onChange={handleChange}
                                options={szlc}
                            />
                        </div>
                        <div>
                            <p>*<span>所在空间</span></p>
                            <Select
                                onChange={handleChange}
                                options={szkj}
                            />
                        </div>
                    </div>

                    <div className="tuizu2">
                        <p>*<span>退租方式</span></p>
                        <div>
                            <Radio.Group onChange={onChange1} value={value} size='small'>
                                <Radio value={1} style={{fontSize:'12px',color:'#5E6473'}}>开始日期后租期全部退租</Radio>
                                <Radio value={2} style={{fontSize:'12px',color:'#5E6473'}}>自定义退租日期</Radio>
                            </Radio.Group>
                        </div>
                    </div>

                    <div className="tuizu3">
                        {isTuizu && <div className='tuizu3-a'>
                            <p>*<span>退租开始日期</span></p>
                            <DatePicker onChange={onChange} style={{width:'206px',height:'36px',borderRadius:0}}/>
                        </div>
                        }

                        {isTuizu ? null :<div className='tuizu3-b'>
                            <div>
                                <p>*<span>退租开始日期</span></p>
                                <DatePicker onChange={onChange} style={{width:'206px',height:'36px',borderRadius:0}}/>
                            </div>
                            <div>
                                <p>*<span>退租结束日期</span></p>
                                <DatePicker onChange={onChange} style={{width:'206px',height:'36px',borderRadius:0}}/>
                            </div>
                        </div>
                        }       
                    </div>
                </div>
            </Modal>

            {/* 新租 */}
            <Modal title='新租' open={xinzu} onOk={xinzuOk} onCancel={xinzuCancel} style={{width:'480px'}} cancelText={'取消'} okText={'保存'}>
                <div className="xinzu">
                    <div className="xinzu1">
                        <div>
                            <p>*<span>所在楼宇</span></p>
                            <Select
                                onChange={handleChange}
                                options={szly2}
                            />
                        </div>
                        <div>
                            <p>*<span>所在楼层</span></p>
                            <Select
                                onChange={handleChange}
                                options={szlc2}
                            />
                        </div>
                        <div>
                            <p>*<span>所在空间</span></p>
                            <Select
                                onChange={handleChange}
                                options={szkj2}
                            />
                        </div>
                        <div>
                            <p>没有所需的空间？立即</p>
                            <span onClick={()=>{
                                nav('/zichan/kj')
                            }}>新建</span>
                        </div>
                    </div>

                    <div className='xinzu2'>
                        <div>
                            <p>*<span>租住开始日期</span></p>
                            <DatePicker onChange={onChange} style={{width:'206px',height:'36px',borderRadius:0}}/>
                        </div>
                        <div>
                            <p>*<span>租住结束日期</span></p>
                            <DatePicker onChange={onChange} style={{width:'206px',height:'36px',borderRadius:0}}/>
                        </div>
                    </div>
                </div>
            </Modal>
            
            {/* 续租 */}
            <Modal title='续租' open={xuzu} onOk={xuzuOk} onCancel={xuzuCancel} style={{width:'480px'}} cancelText={'取消'} okText={'保存'}>
                <div className="xuzu">
                    <div className="xuzu1">
                        <div>
                            <p>*<span>所在楼宇</span></p>
                            <Select
                                onChange={handleChange}
                                options={szly3}
                            />
                        </div>
                        <div>
                            <p>*<span>所在楼层</span></p>
                            <Select
                                onChange={handleChange}
                                options={szlc3}
                            />
                        </div>
                        <div>
                            <p>*<span>所在空间</span></p>
                            <Select
                                onChange={handleChange}
                                options={szkj3}
                            />
                        </div>
                        <div>
                            <p>没有所需的空间？立即</p>
                            <span onClick={()=>{
                                nav('/zichan/kj')
                            }}>新建</span>
                        </div>
                    </div>

                    <div className='xuzu2'>
                        <div>
                            <p>*<span>租住开始日期</span></p>
                            <DatePicker onChange={onChange} style={{width:'206px',height:'36px',borderRadius:0}}/>
                        </div>
                        <div>
                            <p>*<span>租住结束日期</span></p>
                            <DatePicker onChange={onChange} style={{width:'206px',height:'36px',borderRadius:0}}/>
                        </div>
                    </div>
                </div>
            </Modal>
        </>
    )
}
